박스형의 요소에 대한 상대적인 2차원 좌표 값을 나타낸다.
<position>
타입은 아래의 여러 값 중에서 하나 혹은 두 개의 값(x, y 좌표)으로 지정할 수 있다.
left
, top
, right
, bottom
, center
(다른 나머지 값이 의미하는 방향에 가로 또는 세로 방향으로 가운데가 될 수 있음)<percentage>
<length>
값을 지정하며 음수도 가능하나의 값만 지정하는 경우에는 x 좌표를 의미하는 것이며 y 좌표는 center
가 기본 값이다.
background-position
속성은 <position>
타입의 값을 지정하지만 예외적으로 3개 또는 4개의 값을 작성할 수도 있다.[left | center | right] || [top | center | bottom]
다음과 같이 값이 지정될 수 있다.
right
center top
[left | center | right | <length-percentage>] [top | center | bottom | <length-percentage>] ?
다음과 같이 지정될 수 있다.
right 10%
15% 100px
20%
[[left | right] <length-percentage>] && [[top | bottom] <length-percentage>]]
x, y축 위치 값이 순서와 관계없이 모두 작성되어야 하며 각 방향별로 center를 제외한 키워드와 공백 후 실제 <length-percentage> 타입의 값을 지정한다.
top 10% right -10px
Modules | ||
---|---|---|
Module Name | Status | Summary |
CSS Values and Units Module Level 3 | 편집자 초안 | Last review date: 2022-6-4 |
CSS1.0 | 권장 | Last review date: 2022-6-4 |
CSS2.1 | 권장 | Last review date: 2022-6-4 |